<template>
		<div class="ele-body">
			<el-row class="oneRow">
				<!-- 第一行按钮 -->
					<el-col class="oneCol">
						<el-tooltip content="保存" placement="top-start">
							<vxe-button class="oneButton" @click="savePp">保存</vxe-button>
						</el-tooltip>
					</el-col>
					<el-col class="oneCol">
						<el-tooltip content="重置" placement="top-start">
							<vxe-button class="oneButton" @click="clearPp">重置</vxe-button>
						</el-tooltip>
					</el-col>	
			</el-row>
			
			<!-- 第二行按钮 -->
				<el-row class="twoRow">
					<el-col class="twoCol">
						<span class="spanClass">编号：</span>
					<el-input class="twoInput" v-model="selectPpbh"   clearable placeholder="请输入品牌编号">	</el-input>
					</el-col>
					<el-col class="twoCol">
						<span class="spanClass">品牌名称：</span>
							<el-input class="twoInput" v-model="selectPpmc"   clearable placeholder="品牌名称"></el-input>
					</el-col>
				</el-row>
				
				<!-- 第三行表格 -->
		<div class="tableDiv">
			<el-row>
				<el-col class="ysy-table1">
					<vxe-toolbar  custom>
						<template v-slot:buttons>
							<el-row class="threeRow">
							<span class="spanClass">备注：</span>
							<vxe-input class="threeInput" v-model="inputBz"></vxe-input>
							</el-row>
						</template>
					</vxe-toolbar>
					<vxe-table 
					auto-resize 
					ref="refTable1"
					border 
					show-header-overflow 
					show-overflow
					highlight-hover-row
					height="600"
					class="mytable-scrollbar" 
					size="mini"
					highlight-current-row 
					resizable
					@cell-click="table1CellCliick"
					:data="table1"
					:loading="spmxLoading"
					:sortable="sortableConfig"
					>
					<vxe-table-column type="checkbox" width="40"></vxe-table-column>
					<vxe-table-column type="seq" title=" " width="40"></vxe-table-column>
					<vxe-table-column field="ppbh" title="品牌编号" min-width="90" align="center" ></vxe-table-column>
					<vxe-table-column field="ppmc" title="品牌名称" min-width="120" align="center" ></vxe-table-column>
					<vxe-table-column field="action" title="操作" min-width="60" align="center">
					<template v-slot="{ row }">
						<vxe-button type="text" status="danger" content="删除" size="mini" @click="table1DelEvent(row)"></vxe-button>
					</template>
					</vxe-table-column>
					<vxe-table-column field="create_time" title="创建时间" min-width="90" align="center" :visible="false"></vxe-table-column>
					</vxe-table>

				</el-col>
			</el-row>
		</div>
	
	</div>
</template>

<script>
	
	
	export default{
	
		data() {
			return{
				spList:[] ,
				selectPpbh:'',
				table1:[],
				selectPpmc:'',
				selectPpmc2:'',//老的品牌名称
				Disabled:false, //是否被禁用
				spmcList:[],
				inputBz:'',
				spmxLoading:false,
				sortableConfig:true,
				sfxk:0,//是否新商品
				sfbl:1
				
			}
		},
	methods:{
		savePp(){
			if(this.selectPpbh == null || this.selectPpbh == ''){
				this.$message.info("请输入品牌编号")
				return;
			}
			
			if(this.selectPpmc == null || this.selectPpmc == ''){
				this.$message.info("请输入品牌名称")
				return;
			}
			
			if(this.sfxk==1 && this.selectPpmc != this.selectPpmc2){
				this.$confirm('品牌名称有改动，确定修改品牌名吗?', '提示', {
					type: 'warning'
				}).then(() => {
					this.updatePp(this.selectPpbh,this.selectPpmc);
				})
			}else{
				this.$http.post("/scm/scm/xsmx/savePp",{
					ppbh : this.selectPpbh,
					ppmc : this.selectPpmc,
					bz : this.inputBz
				}).then(res => {
					//console.log(res,'res');
					if(res.data.code == 0){
						this.$message.success(res.data.msg)
						this.selectPpbh = null
						this.selectPpmc =null
						this.inputBz=null
						this.selectAll();
					}else{
						this.$message.info(res.data.msg)
					}
				})
			}	
		},
		table1DelEvent(row){
			this.$confirm('确定要删除此行结果吗?', '提示', {
				type: 'warning'
			}).then(() => {
			this.$http.post("/scm/scm/xsmx/deletePp",{
				ppbh:row.ppbh,
				id:row.id
			}).then(res => {
				if(res.data.code == 0){
					this.$message.success(res.data.msg)
					this.selectAll();
				}else{
					this.$message.info(res.data.msg)
				}
			})
		}
		)},
		updatePp(ppbh,ppmc){
			// console.log(khmc,'khmc');
			this.$http.post("/scm/scm/xsmx/updatePp",{
				ppbh:ppbh,
				ppmc:ppmc,
			}).then(res=>{
				this.$message.success(res.data.msg)
				this.selectAll();
			})
		},
		handleClear() {
			this.selectspbh = '';
		},
		table1CellCliick(row){
			//console.log(row,'row');
			this.selectPpbh = row.row.ppbh;
			this.selectPpmc = row.row.ppmc;
			this.selectPpmc2 = row.row.ppmc;
			this.Disabled=true;//禁用编号更改
			this.sfxk=1;
		},
		clearPp(){
			this.selectPpbh = '';
			this.selectPpmc = '';
			this.selectPpmc2 = '';
			this.sfxk=0;
			this.Disabled=false;//禁用编号更改
			
		},
		selectAll(){
			//查询已存在的商品
			this.$http.post("/scm/scm/xsmx/selectPp").then(res => {
				//console.log(res);
				this.table1  = res.data;
				})
			},
		},
		mounted(){
			this.selectAll();
		}
	}
</script>

<style scoped>
	.oneRow{
		border-bottom: 1px solid lightgray;
	}
	.oneCol{
		width: 57px;
		
	}
	.oneButton{
		width: 60px;
		height: 30px;
	}
	.twoRow{
		display: flex;
	}
	.twoCol{
		width: 250px;
		margin-top: 10px;
		margin-left: 5px;
	}
	.twoInput{
		height: 30px;
		width: 180px;
	}
	.threeRow{
		margin-left: 5px;
		margin-top: 0px;
	}
	.threeInput{
		width: 85%;
		height: 30px;
	}
	.spanClass{
		font-weight: bold;
	}
	.tableDiv{
		margin-top: 0px;
		height: 90%;
	}
	.ysy-table1 {
		font-weight: 500;
	}
	
	
</style>
